<template lang="pug">
  .feedfack
    .toolbar
      .breadcrumbs 申请试用列表
    table.table
      thead
        tr
          th(v-for="(item,index) in titles" :key="index") {{item}}
      tbody
        tr(v-for="(item,index) in trials" :key="index")
          td {{item.createTime}}
          td {{item.contactWay}}
          td {{item.organizationName}}
          td {{item.remark}}
    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
</template>
<
<script>
  let titles = '申请时间 联系方式 申请单位名称 业务需求'.split(' ')
  export default {
    name: "trial",
    data() {
      return {
        titles,
        pageNow: 1,
        pageSize: 10,
        list: [],
        trials: [],
        pagecount: ''
      }
    },
    mounted() {
      this.gettrial()
    },
    methods: {
      async gettrial() {
        let res = await this.$ajax.get(`xyssoManager/trial/queryAll?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
        let data = res.data
        if (data.code == 200) {
          this.trials = data.data
          this.total = data.size
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
          }
        }
      },
      gotopage(item){
        if(item > this.pagecount) return
        if(item < 1) return
        this.pageNow = item
        this.gettrial()
      },
    }
  }
</script>
<
<style lang="stylus" scoped>
  .feedfack
    background #ffffff
    margin 0 auto
    .toolbar
      width 100%
      height 70px
      line-height 70px
      background #fff
      border-bottom 1px solid #e0e0e0
      .breadcrumbs
        float left
        margin-left 30px
        font-size 18px
    > .table
      width 100%
      background #fff
      border-spacing 0
      padding 22px 30px 0 30px
      > thead
        > tr
          height 40px
          border-bottom 5px solid #f0f5fb
          color #999999
          font-size 12px
          > th
            line-height 40px
            font-size 12px
            color #999
            text-align center
            background #f5f5f5
            &:nth-child(1)
              width 16%
            &:nth-child(2)
              width 27%
            &:nth-child(3)
              width 27%
            &:nth-child(4)
              width 30%

      > tbody
        color #686868
        font-size 14px
        > tr
          border 1px solid #eeeeee
          > td
            min-height 52px
            padding 17px 10px
            text-align center
            border-bottom 1px solid #eee
    .footer
      margin-top 20px

  .m-pagination
    float right
    font-size 0
    a
      text-decoration none
      display inline-block
      width 32px
      height 32px
      border-radius 5px
      text-align center
      line-height 32px
      margin-right 10px
      font-size 12px
      color #999
      background #fff
      &.active
      &:hover
        background #e75a46
        color #fff
      &:first-of-type
      &:last-of-type
        width 52px
</style>

